<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <h2>单行文本框(oninput)</h2>
            <p> 
                <!-- input:text textarea 会通过v-mode将value和数据进行双向绑定 并在内容发生改变时(oninput)更新数据 -->
                oninput:<input type="text" v-model="message">
            </p>
            <p>message:{{message}}</p>
            <p><button @click="message='world'">修改message</button></p>
        </div>
        <div>
            <h2>.lazy</h2>
            <p> 
                <!-- input:text textarea 会通过v-mode将value和数据进行双向绑定 并在内容发生改变时(oninput)更新数据 -->
                oninput:<input type="text" v-model.lazy="msg">
            </p>
            <p>msg:{{msg}}</p>
            <p><button @click="msg='world'">修改msg</button></p>
        </div>

        <div>
            <h2>.number</h2>
            <p> 
                <!-- input:text textarea 会通过v-mode将value和数据进行双向绑定 并在内容发生改变时(oninput)更新数据 -->
                oninput:<input type="number" v-model.number="num">
            </p>
            <p>num:{{num}}</p>
            <!-- <p v-if="num!=null">类型:{{typeof num}}</p> -->
            <p><button @click="num=0">修改num</button></p>
        </div>
        <div>
            <h2>.trim</h2>
            <p> 
                <!-- input:text textarea 会通过v-mode将value和数据进行双向绑定 并在内容发生改变时(oninput)更新数据 -->
                oninput:<input type="text" v-model.trim="content">
            </p>
            <p>content:{{content}}</p>
            <p><button @click="content=0">修改num</button></p>
        </div>
        <div>
            <h2>.lazy.trim</h2>
            <p> 
                <!-- input:text textarea 会通过v-mode将value和数据进行双向绑定 并在内容发生改变时(oninput)更新数据 -->
                oninput:<input type="text" v-model.lazy.trim="text">
            </p>
            <p>text:{{text}}</p>
            <p><button @click="text=0">修改num</button></p>
        </div>
    </div>
</body>
<script>

    // .lazy
    // 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步：

    // .number
    // 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

    var vm = new Vue({
        el:"#app",
        data:{
            message:"",
            msg:"",
            num:null,
            content:"",
            text:"",
        }
    });


</script>
</html>